<template>
  <div class="goods-wrapper">
    <div class="goods-bg">
      <div class="goods-title" :style="{ top: topOffSet + '%' }">匠心美物</div>
    </div>
    <div class="goods-container">
      <Layout>
        <Layout :style="{ padding: '0 50px' }">
          <Breadcrumb :style="{ margin: '16px 0' }">
            <BreadcrumbItem to="/">首页</BreadcrumbItem>
            <BreadcrumbItem v-if="this.$route.query.type" to="/goods?type=bid"
              >拍卖会场</BreadcrumbItem
            >
            <BreadcrumbItem v-else to="/goods">主会场</BreadcrumbItem>
            <BreadcrumbItem v-if="kindName" replace>{{
              kindName
            }}</BreadcrumbItem>
          </Breadcrumb>
          <Content
            :style="{
              padding: '24px 0',
              minHeight: '280px',
              background: '#fff',
            }"
          >
            <Layout>
              <Sider hide-trigger :style="{ background: '#fff' }">
                <!-- 拍卖会场菜单 -->
                <Menu
                  v-if="this.$route.query.type"
                  theme="light"
                  width="auto"
                  :accordion="true"
                  :active-name="kindName"
                >
                  <MenuItem name="goods" id="goods">
                    <Button
                      long
                      type="primary"
                      size="large"
                      icon="ios-shirt"
                      to="/goods"
                      ghost
                      >拍卖会场</Button
                    >
                  </MenuItem>
                  <MenuItem
                    v-for="(cate, id) in cates"
                    :key="id"
                    :to="'/goods?type=bid&cate_id=' + cate.id"
                    :name="cate.label"
                  >
                    <Icon type="ios-hammer-outline" />
                    {{ cate.label }}
                  </MenuItem>
                </Menu>
                <!-- 主会场菜单 -->
                <Menu
                  v-else
                  theme="light"
                  width="auto"
                  :accordion="true"
                  :active-name="kindName"
                >
                  <MenuItem name="bid" id="bid">
                    <Button
                      long
                      type="error"
                      size="large"
                      icon="ios-hammer"
                      to="?type=bid"
                      ghost
                      data-intro='<h3>点击此处切换拍卖会场</h3>'
                      data-step="1"
                      >主会场</Button
                    >
                  </MenuItem>
                  <Submenu
                    :name="cate.value"
                    v-for="cate in cates"
                    :key="cate.id"
                  >
                    <template slot="title">
                      <Icon type="ios-pricetags-outline" />
                      {{ cate.label }}
                    </template>
                    <MenuItem
                      :name="kind.label"
                      v-for="kind in cate.children"
                      :key="kind.value"
                      :to="'/goods?kind=' + kind.value"
                      >{{ kind.label }}</MenuItem
                    >
                  </Submenu>
                </Menu>
              </Sider>
              <div class="goods-content">
                <div class="goods-empty" v-if="!goodsData.data">
                  <Icon
                    custom="iconfont icon-kong"
                    :size="40"
                    color="#8a8a8a"
                  />暂无商品，去别处逛逛吧...
                </div>
                <div class="bid-item-area" v-if="this.$route.query.type">
                  <!-- 竞拍列表 -->

                  <div class="bid-toolbar">
                    <div class="status-box">
                      <span>状态：</span>
                      <Select
                        v-model="bidStatus"
                        style="width:170px"
                        @on-change="handleStatus"
                      >
                        <Option
                          v-for="item in statusList"
                          :value="item.value"
                          :key="item.value"
                          >{{ item.label }}</Option
                        >
                      </Select>
                    </div>

                    <RadioGroup
                      v-model="sortType"
                      type="button"
                      @on-change="handleSort"
                    >
                      <Radio label="0">
                        <span>默认</span>
                      </Radio>
                      <Radio label="1">
                        <span>价格</span>
                        <Icon type="ios-arrow-up" />
                      </Radio>
                      <Radio label="2">
                        <span>价格</span>
                        <Icon type="ios-arrow-down" />
                      </Radio>
                      <Radio label="3">
                        <span>出价次数</span>
                        <Icon type="ios-arrow-up" />
                      </Radio>
                      <Radio label="4">
                        <span>出价次数</span>
                        <Icon type="ios-arrow-down" />
                      </Radio>
                    </RadioGroup>

                    <Input
                      v-model="searchContent"
                      @on-search="handleSearch"
                      search
                      enter-button
                      placeholder="搜索拍卖品"
                      style="width: 300px"
                    />
                  </div>
                  <div class="goods-items-box">
                    <bid-item
                      v-for="item in goodsData.data"
                      :key="item.id"
                      :bidData="item"
                    />
                  </div>
                </div>

                <div class="goods-item-area" v-else>
                  <!-- 普通商品列表 -->
                  <div class="goods-toolbar">
                    <RadioGroup
                      v-model="sortType"
                      type="button"
                      @on-change="handleSort"
                    >
                      <Radio label="0">
                        <span>默认</span>
                      </Radio>
                      <Radio label="1">
                        <span>价格</span>
                        <Icon type="ios-arrow-up" />
                      </Radio>
                      <Radio label="2">
                        <span>价格</span>
                        <Icon type="ios-arrow-down" />
                      </Radio>
                      <Radio label="3">
                        <span>销量</span>
                        <Icon type="ios-arrow-up" />
                      </Radio>
                      <Radio label="4">
                        <span>销量</span>
                        <Icon type="ios-arrow-down" />
                      </Radio>
                    </RadioGroup>
                    <div class="price">
                      <span>价格区间：</span>
                      <Slider
                        v-model="priceRange"
                        range
                        :min="1"
                        :max="9999"
                        @on-change="handleRange"
                        style="width: 300px"
                      ></Slider>
                    </div>

                    <Input
                      v-model="searchContent"
                      @on-search="handleSearch"
                      search
                      enter-button
                      placeholder="搜索商品"
                      style="width: 300px"
                    />
                  </div>

                  <div class="goods-items-box">
                    <goodsItem
                      v-for="item in goodsData.data"
                      :key="item.id"
                      :goodsData="item"
                    />
                  </div>
                </div>

                <Page
                  v-if="goodsData.total"
                  :total="goodsData.total"
                  :page-size="goodsData.per_page"
                  @on-change="onGoodsPageChange"
                />
              </div>
            </Layout>
          </Content>
        </Layout>
      </Layout>
    </div>
  </div>
</template>

<script>
import 'intro.js/minified/introjs.min.css';

export default {
  name: 'goods',
  data() {
    return {
      topOffSet: 20,
      cates: [],
      goodsData: [],
      kindName: '',
      searchContent: '',
      priceRange: [1, 9999],
      sortType: 0,
      bidStatus: 4,
      statusList: [
        {
          value: 4,
          label: '全部',
        },
        {
          value: 0,
          label: '未开始',
        },
        {
          value: 1,
          label: '进行中',
        },
        {
          value: 2,
          label: '已成交',
        },
        {
          value: 3,
          label: '已流拍',
        },
      ],
    };
  },
  components: {
    goodsItem: () => import('@/components/Goods_Item'),
    bidItem: () => import('@/components/Bid_Item'),
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
    this.axios
      .get('/api/category')
      .then((res) => (this.cates = res.data))
      .catch((error) => console.log('error :', error));
    //   if (this.$route.query.type) {
    //   this.fetchBidGoods();
    // } else
    //   this.fetchGoods();
    this.$route.query.type ? this.fetchBidGoods() : this.fetchGoods();

    const introJS = require('intro.js')();
    introJS
      .setOptions({
        overlayOpacity: 0.35, // popup透明度
        skipLabel: '跳过',
        nextLabel: '下一步',
        prevLabel: '上一步',
        doneLabel: '我明白了',
        hidePrev: true, // 若在第一步，會隱藏上一步按鈕
        hideNext: true, // 若在最後一步，會隱藏下一步按鈕
      })
      .start();
  },
  watch: {
    $route() {
      if (this.$route.query.type) {
        this.fetchBidGoods();
      } else {
        this.fetchGoods();
      }
    },
  },
  methods: {
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log("页面滚动距离", scrollTop);
      scrollTop < 400
        ? (this.topOffSet = 20 + scrollTop / 25)
        : (this.topOffSet = 40);
      // console.log('距离顶部距离 :', this.topOffSet);
    },
    fetchGoods(sort = 0, min = 0, max = 9999, key = '', page = 1) {
      if (this.$route.query.kind) {
        // 按分类检索商品
        this.axios
          .get(
            `/api/goods?kind=${this.$route.query.kind}&sort=${sort}&min=${min}&max=${max}&key=${key}&page=${page}`
          )
          .then((res) => {
            this.goodsData = res.data;
            this.axios
              .get(`/api/kind/${this.$route.query.kind}`)
              .then((name) => {
                this.kindName = name.data;
              });
          });
      } else {
        // 检索所有商品
        this.axios
          .get(
            `/api/goods?sort=${sort}&min=${min}&max=${max}&key=${key}&page=${page}`
          )
          .then((res) => (this.goodsData = res.data))
          .catch((error) => console.log('error :', error));
        this.kindName = ''; // 清除Breadcrumb子菜单
      }
    },
    fetchBidGoods(status = 4, sort = 0, key = '', page = 1) {
      // 检索拍卖品
      if (this.$route.query.cate_id) {
        // 按分类检索拍卖品
        this.axios
          .get(
            `/api/bid_goods?cate_id=${this.$route.query.cate_id}&status=${status}&sort=${sort}&key=${key}&page=${page}`
          )
          .then((res) => {
            this.goodsData = res.data;
            this.kindName = this.cates[this.$route.query.cate_id - 1].label;
          });
      } else {
        this.axios
          .get(
            `/api/bid_goods?status=${status}&sort=${sort}&key=${key}&page=${page}`
          )
          .then((res) => (this.goodsData = res.data));
        this.kindName = '';
      }
    },
    onGoodsPageChange(page) {
      if (this.$route.query.type == 'bid') {
        this.fetchBidGoods(undefined, undefined, undefined, page);
      } else {
        this.fetchGoods(undefined, undefined, undefined, undefined, page);
      }
    },
    handleSort(item) {
      if (this.$route.query.type == 'bid') {
        this.fetchBidGoods(undefined, item);
      } else {
        this.fetchGoods(item);
      }
    },
    handleRange(val) {
      this.fetchGoods(undefined, val[0], val[1]);
    },
    handleSearch(val) {
      if (this.$route.query.type == 'bid') {
        this.fetchBidGoods(undefined, undefined, val);
      } else {
        this.fetchGoods(undefined, undefined, undefined, val);
      }
    },
    handleStatus(val) {
      this.fetchBidGoods(val);
    },
  },
};
</script>
